<template>
  <div ref="mytoast" class="toast">
    <!--遮罩层-->
    <div class="mask">
    </div>
    <!--内容层-->
    <div class="box" :style="{height:toastMsg.length>2?'auto':'10%'}">
      <!--{{toastMsg}}-->
      <div style="text-align:center;word-break: break-word;" v-html="toastMsg"></div>
    </div>
  </div>
</template>

<script>
  export default {
    name: "MyToast",
    props:{
      //此处一定要用value
      value: {
        type:Boolean,
        default:false
      },
      toastMsg:{
        type:String,
        default:''
      },
      toastTime:{
        type:Number,
        default:3000
      }
    },
    methods:{
      changeTranslateY(){
        // let toast=document.getElementById('mytoast')
        let toast=this.$refs.mytoast
        toast.style.transform = 'translateY(0vh)';
        setTimeout(()=>{
          this.$emit('input',false)
          toast.style.transform = 'translateY(100vh)';
        },this.toastTime)
      }
    },
    watch:{
      value(value){
        if(value){
          this.changeTranslateY();
        }
      }
    }
  }
</script>

<style scoped>
  .toast{
    width:100%;
    height:100vh;
    position: fixed;
    top:0;
    left:0;
    transform:translateY(100vh);
    transition: transform 0.5s;
    z-index:1000;
    /*animation: maskdonghua 3s;//css动画*/
  }
  /*css动画*/
  /*@keyframes maskdonghua {
    !*from {transform:translateY(100vh);}
    to {transform:translateY(0px);}*!
    0%   {transform:translateY(100vh);}
    25%  {transform:translateY(0px);}
    50%  {transform:translateY(0px);}
    75%  {transform:translateY(0px);}
    100% {transform:translateY(100vh);}
  }*/
  .mask{
    width:100%;
    height:100%;
    background:gray;
    position:absolute;
    top:0;
    left:0;
    z-index:1000;
    opacity:0.6;
  }
  .box{
    padding: 10px;
    box-sizing: border-box;
    width: 80%;
    margin: 0 10%;
    height:50%;
    background: #ffffff;
    position:absolute;
    top:30%;
    border-radius: 10px;
    z-index:1001;
  }
</style>
